<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'
import { useTokenStore } from "@/stores/token.js";

const props = defineProps({
    visible: Boolean,
    title: String,
    categories: Array,
    articleModel: Object
})

const emit = defineEmits(['update:visible', 'addArticle', 'updateArticle', 'cancel'])

const tokenStore = useTokenStore()

// 完全保留原有逻辑
const uploadSuccess = (result) => {
    props.articleModel.coverImg = result.data;
}

const handlePublish = (state) => {
    if (props.title === '添加日记') {
        emit('addArticle', state)
    } else {
        emit('updateArticle', state)
    }
}

const drawerCancel = () => {
    emit('cancel')
}
</script>

<template>
    <el-drawer
        :model-value="visible"
        :title="title"
        direction="rtl"
        size="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        @update:model-value="val => emit('update:visible', val)"
    >
        <el-form :model="articleModel" label-width="100px">
            <el-form-item label="日记标题">
                <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="日记分类">
                <el-select placeholder="请选择" v-model="articleModel.categoryId">
                    <el-option
                        v-for="c in categories"
                        :key="c.id"
                        :label="c.categoryName"
                        :value="c.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日记封面">
                <el-upload
                    class="avatar-uploader"
                    :auto-upload="true"
                    :show-file-list="false"
                    action="/api/file/upload"
                    name="file"
                    :headers="{ 'Authorization': tokenStore.token }"
                    :on-success="uploadSuccess"
                >
                    <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar"/>
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="日记内容">
                <div class="editor">
                    <quill-editor
                        theme="snow"
                        v-model:content="articleModel.content"
                        contentType="html"
                    ></quill-editor>
                </div>
            </el-form-item>
            <el-form-item>
                <!-- 完全保留原有按钮逻辑 -->
                <el-button type="primary" @click="handlePublish('已发布')">发布</el-button>
                <el-button type="info" @click="handlePublish('草稿')">草稿</el-button>
                <el-button @click="drawerCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }
        .el-upload:hover {
            border-color: var(--el-color-primary);
        }
        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;
    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>